import {Component, OnDestroy, OnInit} from "@angular/core";
import {CommService} from "../comm-service";

declare var $: any;

@Component({
  template: `
    <div class="title">
      <div class="title_text">{{comptitle}}</div>
    </div>
    <div class="row">
      <form class="form-horizontal" role="form">
        <div class="col-lg-6 col-lg-offset-5">
          <div class="form-group">
            <div class="col-lg-12">
              <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-calculator"></i></span>
                <input type="text" class="form-control datetimepickerB_content" id="s_sbtime"
                       [value]="s_obj.kssj">
                <span class="input-group-addon">至</span>
                <input type="text" class="form-control datetimepickerE_content" id="s_edtime"
                       [value]="s_obj.jssj">
                <span class="input-group-addon"><i class="fa fa-calculator"></i></span>
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-1">
          <button type="button" class="btn blue" (click)="inittable_sczd()">
            <i class="fa fa-search"></i> 搜索
          </button>
        </div>
      </form>
    </div>
    <div class="row" style="margin-top: 10px;border-top: 1px solid #ccc">
      <div class="col-lg-12" *ngIf="table_sczd">
        <my-table [o]="table_sczd"></my-table>
      </div>
    </div>
  `,
  styles: [
    ".title{width: 100%;height: auto;padding: 10px; border-bottom: 1px solid #ccc; color: rgb(138 143 151);margin-bottom: 15px;}",
    ".title>.title_text{height: 15px;line-height: 15px;font-size: 15px;  width: auto;border-left: 5px solid #1477F3;padding-left: 10px}",
  ]
})
export class DlSczdComponent implements OnInit, OnDestroy {
  comptitle: string = "终端电量统计";
  s_obj: any = {
    cxlx: "sczdsb",
    kssj: "",
    jssj: ""
  };
  table_sczd: any;

  inittable_sczd(): void {
    const that = this;
    this.table_sczd = {
      tableid: "table_sczd",
      url: "sjgz/sbwb/lltj",
      reqobj: this.s_obj,
      sidePagination: "server",
      pageSize: 10,
      pageList: [10, 20, 30],
      total: "totalRows",
      rows: "lltjjgList",
      columns: [{
        title: "终端ID",
        field: "sbid",
      }, {
        title: "总流量（KB）",
        field: "zll",
      }]
    };
    this.table_sczd.height = this.commservice.getViewPort().height - this.commservice.topH - this.commservice.topmenuH - 240 - 50;
  }

  /**
   * 处理搜索表格
   */
  createSearchForm(): void {
    $('.datetimepickerB_content').datetimepicker({
      autoclose: true,
      language: 'zh-CN',
      format: 'yyyy-mm-dd hh:ii:ss',
      pickerPosition: "bottom-left",
      minView: 0
    }).on("changeDate", function (ev) {
      const selectdate = ev.date.valueOf(); // 实际时间+ 8h
      // 结束时间不能小于开始时间,
      $(".datetimepickerE_content").datetimepicker("setStartDate", new Date(selectdate - 8 * 60 * 60 * 1000));
    });
    $('.datetimepickerE_content').datetimepicker({
      autoclose: true,
      language: 'zh-CN',
      format: 'yyyy-mm-dd hh:ii:ss',
      pickerPosition: "bottom-left",
      minView: 0
    }).on("changeDate", function (ev) {
      const selectdate = ev.date.valueOf(); // 实际时间+ 8h
      // 开始时间不能大于结束时间
      $(".datetimepickerB_content").datetimepicker("setEndDate", new Date(selectdate - 8 * 60 * 60 * 1000));
    });
    const initBdate = this.commservice.YMDHMS_get(Date.now() - 8 * 60 * 60 * 1000);
    const initEdate = this.commservice.YMDHMS_get(false);
    this.s_obj.kssj = initBdate;
    this.s_obj.jssj = initEdate;
  }

  constructor(private commservice: CommService) {

  }

  ngOnInit() {
    this.createSearchForm();
    this.inittable_sczd();
  }

  ngOnDestroy() {

  }

}
